import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { increment, decrement, add2Num } from './store/modules/counterStore'
import { fetchChannelList } from "./store/modules/channelStore";

function App() {
  const { count } = useSelector(state => state.counter)
  const dispatch = useDispatch()
  const { channelList } = useSelector(state => state.channel)

  useEffect(() => {
    dispatch(fetchChannelList(dispatch))
  }, [dispatch])

  return (
    <div className="App">
      <button onClick={() => dispatch(decrement())}>-</button>
      {count}
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(add2Num(10))}>add to 10</button>
      <button onClick={() => dispatch(add2Num(20))}>add to 20</button>
      <h1>异步请求数据</h1>
      <ul>
        {channelList.map(item => <li key={item.name}>{item.name}</li>)}
      </ul>
    </div>
  );
}

export default App
